<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${content.title} - 内容详情</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    :root {
    --primary: #4361ee;
    --secondary: #3f37c9;
    --accent: #4cc9f0;
    --dark: #1d3557;
    --darker: #0d1b2a;
    --light: #f8f9fa;
    --gray: #8d99ae;
    --success: #4caf50;
    --warning: #ff9800;
    --danger: #f44336;
    --card-bg: rgba(29, 53, 87, 0.8);
    --transition: all 0.3s ease;
    }

    body {
    background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
    color: var(--light);
    min-height: 100vh;
    background-attachment: fixed;
    line-height: 1.6;
    }


    /* 返回按钮 */
    .back-button {
    margin: 1rem 0;
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    }

    .back-button:hover {
    transform: translateX(-5px);
    }

    .back-button i {
    margin-right: 0.5rem;
    }

    /* 主内容区样式 */
    .main-content {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 2rem;
    }

    /* 内容详情卡片 */
    .content-detail-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: var(--transition);
    }

    .content-detail-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .detail-header {
    display: flex;
    flex-wrap: wrap;
    }

    .detail-image {
    width: 300px;
    height: 450px;
    object-fit: cover;
    }

    .detail-info {
    flex: 1;
    padding: 2rem;
    }

    .detail-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    }

    .detail-meta {
    color: var(--gray);
    margin-bottom: 1.5rem;
    }

    .detail-meta span {
    margin-right: 1rem;
    }

    .detail-rating {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    }

    .detail-rating .stars {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    }

    .detail-rating .rating-value {
    font-size: 1.5rem;
    font-weight: 700;
    }

    .detail-description {
    color: var(--light);
    margin-bottom: 1.5rem;
    }

    .detail-creators {
    color: var(--gray);
    }

    .detail-creators p {
    margin-bottom: 0.5rem;
    }

    /* 评论区样式 */
    .reviews-section {
    margin-bottom: 3rem;
    }

    .reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    }

    .reviews-title {
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;
    padding-left: 1rem;
    }

    .reviews-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--accent);
    border-radius: 2px;
    }

    .write-review-btn {
    background: var(--primary);
    color: white;
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    }

    .write-review-btn:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    }

    /* 评论表单 */
    .review-form-container {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: var(--transition);
    }

    .review-form-container:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .review-form-header {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    }

    .rating-stars {
    display: flex;
    margin-bottom: 1.5rem;
    }

    .rating-star {
    font-size: 2rem;
    color: var(--gray);
    cursor: pointer;
    transition: var(--transition);
    margin-right: 0.5rem;
    }

    .rating-star:hover, .rating-star.active {
    color: var(--warning);
    }

    .review-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
    color: var(--light);
    resize: none;
    margin-bottom: 1.5rem;
    transition: var(--transition);
    }

    .review-textarea:focus {
    outline: none;
    border-color: var(--accent);
    }

    .review-form-actions {
    display: flex;
    justify-content: flex-end;
    }

    .submit-review-btn {
    background: var(--primary);
    color: white;
    padding: 0.7rem 2rem;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    }

    .submit-review-btn:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    }

    /* 已有评论样式 */
    .existing-review {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: var(--transition);
    }

    .existing-review:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    }

    .review-user {
    display: flex;
    align-items: center;
    }

    .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
    }

    .user-info .username {
    font-weight: 600;
    }

    .user-info .review-date {
    color: var(--gray);
    font-size: 0.9rem;
    }


    .reviews-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    }
</style>
</head>
<body>
<%@ include file="navbar.jsp" %>

<div class="main-content">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
        <a href="index.jsp">首页</a>
        <i class="fas fa-angle-right"></i>
        <a href="${content.type}s.jsp">${content.type == 'movie' ? '电影' : content.type == 'book' ? '图书' : '音乐'}</a>
        <i class="fas fa-angle-right"></i>
        <span>${content.title}</span>
    </div>

    <h1 class="page-title">${content.title}</h1>

    <!-- 显示消息 -->
    <c:if test="${not empty sessionScope.commentSuccess}">
        <div class="message success-message">
            <i class="fas fa-check-circle"></i> ${sessionScope.commentSuccess}
            <c:remove var="commentSuccess" scope="session"/>
        </div>
    </c:if>

    <c:if test="${not empty sessionScope.error}">
        <div class="message error-message">
            <i class="fas fa-exclamation-circle"></i> ${sessionScope.error}
            <c:remove var="error" scope="session"/>
        </div>
    </c:if>

    <!-- 内容详情 -->
    <div class="content-detail-card">
        <div class="detail-header">

            <div class="detail-info">
                <div class="detail-meta">
                    <c:choose>
                        <c:when test="${content.type == 'movie'}">
                            <span>导演: ${content.directorOrAuthor}</span>
                        </c:when>
                        <c:when test="${content.type == 'book'}">
                            <span>作者: ${content.directorOrAuthor}</span>
                        </c:when>
                        <c:when test="${content.type == 'music'}">
                            <span>艺术家: ${content.directorOrAuthor}</span>
                        </c:when>
                    </c:choose>
                    <span>${content.releaseOrPublishDate}</span>
                    <span>${content.genre}</span>
                </div>
                <div class="detail-rating">
                    <div class="stars">
                        <c:forEach begin="1" end="5" var="i">
                            <c:choose>
                                <c:when test="${i <= content.rating}">
                                    <i class="fas fa-star"></i>
                                </c:when>
                                <c:when test="${i - 0.5 <= content.rating}">
                                    <i class="fas fa-star-half-alt"></i>
                                </c:when>
                                <c:otherwise>
                                    <i class="far fa-star"></i>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </div>
                    <div class="rating-value">${content.rating}</div>
                    <div class="text-gray-400 ml-2">(${content.ratingCount}条评价)</div>
                </div>
                <p class="detail-description">${content.description}</p>
            </div>
        </div>
    </div>

    <!-- 评论区域 -->
    <section class="reviews-section">
        <div class="reviews-header">
            <h2 class="reviews-title">用户评论 (${content.ratingCount})</h2>

            <c:if test="${not empty sessionScope.user}">
                <button class="write-review-btn" id="showReviewFormBtn">
                    <i class="fas fa-pencil-alt"></i>
                        ${empty userComment ? '发表评论' : '修改评论'}
                </button>
            </c:if>
        </div>

        <!-- 评论表单 -->
        <div class="review-form-container" id="reviewFormContainer"
             style="${empty userComment ? 'display: none;' : ''}">
            <form action="add-comment" method="post">
                <input type="hidden" name="contentId" value="${content.id}">
                <input type="hidden" name="contentType" value="${content.type}">
                <input type="hidden" name="redirectUrl" value="content-detail.jsp?id=${content.id}&type=${content.type}">

                <div class="rating-stars">
                    <c:forEach begin="1" end="5" var="i">
                        <i class="rating-star ${i <= (empty userComment ? 0 : userComment.rating) ? 'fas active' : 'far'}"
                           data-rating="${i}" onclick="selectRating(${i})"></i>
                    </c:forEach>
                    <input type="hidden" name="rating" id="ratingInput"
                           value="${empty userComment ? 0 : userComment.rating}">
                </div>

                <div class="form-group">
                    <textarea name="comment" class="review-textarea" required
                              placeholder="写下你的评论...">${empty userComment ? '' : userComment.commentText}</textarea>
                </div>

                <div class="review-form-actions">
                    <button type="submit" class="submit-review-btn">提交</button>
                    <c:if test="${not empty userComment}">
                        <button type="button" class="cancel-btn" onclick="hideForm()">取消</button>
                    </c:if>
                </div>
            </form>
        </div>

        <!-- 评论列表 -->
        <div class="comments-container">
            <c:choose>
                <c:when test="${empty comments}">
                    <div class="empty-state">
                        <p>还没有用户评论</p>
                    </div>
                </c:when>
                <c:otherwise>
                    <ul class="comments-list">
                        <c:forEach items="${comments}" var="comment">
                            <li class="comment-item">
                                <div class="comment-header">
                                    <div class="comment-user">

                                        <div class="user-info">
                                            <div class="username">${comment.username}</div>
                                            <div class="comment-date">
                                                <fmt:formatDate value="${comment.commentDate}" pattern="yyyy-MM-dd HH:mm"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="comment-rating">
                                        <c:forEach begin="1" end="5" var="i">
                                            <i class="${i <= comment.rating ? 'fas' : 'far'} fa-star"></i>
                                        </c:forEach>
                                    </div>
                                </div>
                                <div class="comment-body">
                                    <p>${comment.commentText}</p>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </c:otherwise>
            </c:choose>
        </div>
    </section>
</div>

<%@ include file="footer.jsp" %>

<script>
    // 显示/隐藏评论表单
    document.getElementById('showReviewFormBtn')?.addEventListener('click', function() {
        const form = document.getElementById('reviewFormContainer');
        form.style.display = form.style.display === 'none' ? 'block' : 'none';
    });

    // 选择评分
    function selectRating(rating) {
        const stars = document.querySelectorAll('.rating-star');
        const ratingInput = document.getElementById('ratingInput');

        stars.forEach((star, index) => {
            if (index < rating) {
                star.classList.add('fas', 'active');
                star.classList.remove('far');
            } else {
                star.classList.remove('fas', 'active');
                star.classList.add('far');
            }
        });

        ratingInput.value = rating;
    }

    // 隐藏表单
    function hideForm() {
        document.getElementById('reviewFormContainer').style.display = 'none';
    }

    // 初始化评分显示
    document.addEventListener('DOMContentLoaded', function() {
        const userRating = ${empty userComment ? 0 : userComment.rating};
        if (userRating > 0) {
            selectRating(userRating);
        }
    });
</script>
</body>
</html>